<template>
  <div class="m-message">
    <div class="m-message-container">
      <div class="icon-wrap">
        <slot v-if="$slots.icon" name="icon"></slot>
        <van-icon v-else :name="typeName" class="m-icon" :class="iconClass" />
      </div>
      <slot v-if="$slots.title" name="title"></slot>
      <h4 v-else :class="titleClass">{{ title }}</h4>
      <slot v-if="$slots.content" name="content"></slot>
      <p v-else-if="allowHtml" v-html="content"></p>
      <p v-else>{{ content }}</p>
    </div>
    <div class="m-message-button">
      <slot v-if="showButton && $slots.button" name="button"></slot>
      <van-button
        v-else-if="showButton"
        type="primary"
        round
        block
        @click="buttonClick"
        >{{ buttonText }}</van-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'MMessage',
  props: {
    type: {
      type: String,
    },
    title: {
      type: String,
    },
    content: {
      type: String,
    },
    showButton: {
      type: Boolean,
      default: false,
    },
    buttonText: {
      type: String,
      default: '知道了',
    },
    allowHtml: {
      type: Boolean,
    },
  },
  computed: {
    typeName() {
      let name = 'checked'
      if (this.type === 'error') name = 'clear'
      else if (this.type === 'warn') name = 'warning'
      else if (this.type === 'info') name = 'info'
      return name
    },
    iconClass() {
      return {
        'm-icon-error': this.type === 'error',
        'm-icon-warn': this.type === 'warn',
        'm-icon-info': this.type === 'info',
        'm-icon-success': this.type === 'success' || !this.type,
      }
    },
    titleClass() {
      const titCls = []
      if (this.type === 'error') titCls.push('m-title-error')
      else if (this.type === 'info') titCls.push('m-title-info')
      else if (this.type === 'success') titCls.push('m-title-success')
      return titCls
    },
  },
  methods: {
    buttonClick() {
      this.$emit('click')
    },
  },
}
</script>
<style lang="less" scoped>
.m-message {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  &-container {
    text-align: center;
    width: 270px;
    min-height: 192px;
    .icon-wrap {
      padding: 10px 0;
      .m-icon {
        font-size: 50px;
        &-error {
          color: #ff442f;
        }
        &-warn {
          color: #ff9900;
        }
        &-info {
          color: #2db7f5;
        }
        &-success {
          color: #18c57e;
        }
      }
    }
    h4 {
      font-size: 18px;
      color: #333;
      &.m-title-error {
        color: #ff442f;
      }
      &.m-title-info {
        color: #2db7f5;
      }
      &.m-title-success {
        color: #18c57e;
      }
    }
    p {
      padding: 10px 0;
      color: #666;
      font-size: 15px;
    }
  }
  &-button {
    min-width: 150px;
    min-height: 40px;
    button {
      font-size: 16px;
      background-color: #18c57e;
      border-color: #18c57e;
    }
  }
}
</style>
